<!--
	作者：819115696@qq.com
	时间：2016-06-23
	描述：https://git.oschina.net/RobertGoudan/HB.git
-->
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
		<script type="text/javascript" src="js/test.js"></script>
		<style>
			* {
				margin: 0px;
			}
			
			.d {
				margin-top: 50px;
				width: 400px;
				height: 400px;
				background-color: lavenderblush;
			}
			
			#listBox td:hover {
				background-color: lightblue;
			}
			
			#listBox {
				width: 100px;
				position: absolute;
				border: 1px solid lawngreen;
				overflow-x: hidden;
				overflow-y: auto;
				display: none;
				background-color: white;
			}
			
			#listBox td {
				width: 300px;
				padding: 3px;
				padding-left: 5px;
				border: 1px solid #F3EEEE;
			}
			
			#listBox tr {
				border: 1px solid lightgreen;
			}
			
			#listBox .pitchOn {
				background-color: #F08080 !important;
			}
			
			#inputBox {
				width: 200px;
				margin: 30px;
				height: 20px;
			}
			 .chufa{
				background-color: lavender;
				width: 10px;
				position: absolute;
				border: 1px solid lightgray;
			}
		</style>
		<script>
			$(function() {
				//init();
				a1("#inputBox")
				
				 alert($("#inputBox").offset().top)
                alert($("#inputBox").get(0).offsetTop)
					//a2() 
			})
			function a3(){
				var ftable=$("<table  border='0' cellspacing='0'></table>");
				$("body").append(ftable)
			}
			function a2(ssx){
				var sx="测试1,测试2,测试3,测试4,测试5,"
				var ax=sx.split(",");
				var ftable=$("<table  border='0' cellspacing='0'></table>");
				for(i=0;i<ax.length-1;i++){//注意最后一个逗号,
					console.log(ax[i]+"-");
					var td=$("<td></td>").text(ax[i]);
					ftable.append($("<tr></tr>").append(td))
				}
				$("body").append($("<div id='listBox'></div>").append(ftable))
			}
			function a1(inputx) {//绑定下拉多选,参数1:输入框元素,2:触发下拉元素
				a2()
				var s=$(inputx).offset();alert(s.top)
				$("<div class='chufa'></div>").appendTo("body");
				var sx = $(inputx).get(0);
				$("#listBox").css("top", sx.offsetTop + sx.offsetHeight);
				console.log(sx.offsetTop)
				$("#listBox").css("left", sx.offsetLeft);
				$("#listBox").css("width", sx.offsetWidth)
				$(".chufa").css("height", sx.offsetHeight-2)
				$(".chufa").css("top",sx.offsetTop);
				$(".chufa").css("left", sx.offsetLeft+sx.offsetWidth-10);
				$("tr").each(function(i) {
					if(i % 2 != 0) {
						$(this).css("background-color", "#F3EEEE")
					}
				})
				inpux = true;
				
				$("body").delegate(inputx,"click",function() {
					$("#listBox").css("display", "block")
					if(inpux) {

					} else {

					}
				})
				$("body").delegate(".chufa","click",function() {
					if($("#listBox").css("display")=="none"){
						$("#listBox").css("display", "block")
					}else{
						$("#listBox").css("display", "none")
					}
					
				})
				$("body").delegate("td","click",function() {
					$(this).toggleClass("pitchOn")
					if($(this).css("background-color") == "rgb(240, 128, 128)") {
					} else {
					}
					var s2 = ""
					$(".pitchOn").each(function(i) {
						s2 += $(this).text() + ",";
					})
					$("#inputBox").val(s2)
				})
			}
		</script>
	</head>

	<body>
		<div class="d">
			
			<input type="text" id="inputBox" />
			
			
		</div>
	</body>

</html>